
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="base.css">
</head>
<body>
  <div class="toolbar">
    <button value="dark">dark</button>
    <button value="calm">calm</button>
    <button value="light">light</button>
  </div>
  <h2>Stackoverflow Question</h2>
	I would like to use an external javascript file in another javascript file. For example, I could store all my global variables
in a globals.js file and then call then from the website logic logic.js. Then in the index.html, i would insert the tag.
How do I use the globals.js inside the logic.js?

  <h2>Stackoverflow Answer</h2>
  Javascript doesn't have any implicit "include this other file" mechanisms, like css's @include. You just have to list your
  globals file before the logic file in the tags:

  <pre><code>
  script type="text/javascript" src="globals.js"
  </code></pre>
  If guaranteeing that the globals are available before anything in the logic file fires up, you can do a slow polling loop
  to see if some particular variable is available before calling an init() or whatever function.
  <script>
  const root = document.documentElement;
  // console.log(root);
  const themeBtns = document.querySelectorAll('button');
  themeBtns.forEach(btn => {
    btn.addEventListener('click', handleThemeUpdate);
  })

  function handleThemeUpdate(e) {
    // console.log(e.target.value);
    // js 可以去操作css  js 是王者 
    // querySelector creatElement  
    // css  .style.
    switch(e.target.value) {
      case "dark":
        root.style.setProperty("--bg", "black");
        root.style.setProperty("--bg-text", "white");
        break;
      case "calm":
        root.style.setProperty("--bg", "#B3E5FC");
        root.style.setProperty("--bg-text", "#37474F");
        break;
      case "light":
        root.style.setProperty("--bg", "white");
        root.style.setProperty("--bg-text", "black");
        break;
    }
  }
  </script>
</body>
</html>